<template>
  <div class="lbox">
    <div class="txt1 YouSheBiaoTiHei">订单占比统计</div>
    <div ref="chart" style="width: 100%; height: 340px"></div>
  </div>
</template>
  
  <script>
import * as echarts from "echarts";
import { advOrderRadio } from "../../api/index";
export default {
  data() {
    return {
      data() {
        return {
          myChart: null,
        };
      },
    };
  },
  created() {
    this.id = atob(this.$route.query.id);
  },
  mounted() {
    let that = this;
    this.myChart = echarts.init(this.$refs.chart);
    this.getData();
    setInterval(() => {
      that.getData();
    }, 10000);
  },
  methods: {
    getData() {
      advOrderRadio({ id: this.id }).then((res) => {
        let list = res.data.data.map((item) => {
          return {
            ...item,
            name: item.advName,
            value: item.orderCount,
          };
        });
        let list2 = res.data.data.map((item) => {
          return item.advName;
        });

        this.myChart.setOption({
          legend: {
            data: list2,
            textStyle: {
              color: "#fff",
            },
          },
          grid: {
            containLabel: true,
          },
          tooltip: {
            trigger: "item",
          },
          series: [
            {
              type: "pie",
              radius: ["50%", "70%"],
              itemStyle: {
                borderRadius: 10,
              },
              label: {
                show: true,
                color: "#fff",
                formatter: "{b}:{c}", // {c} 表示数据值
              },
              data: list
            },
          ],
        });
      });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.lbox {
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.txt1 {
  color: #71d2ff;
}
</style>